<template>
  <div class="duyi-collapse">
    <slot />
  </div>
</template>

<script setup>
import { provide, ref } from 'vue'
import { collapseProps, collapseCountextKey } from './props.js'
defineOptions({
  name: 'DuyiCollapse',
})
const props = defineProps(collapseProps)
const emit = defineEmits(['change', 'update:modelValue'])

// 折叠面板的核心逻辑，就是判断数组里面的值
// 拿到用户传递的哪些面板是打开的数组
const activeNames = ref(props.modelValue)

// 核心方法就是相关的点击事件
// 这里 CollapseItem 组件是通过插槽的形式插入进入的
// 使用依赖注入的形式来为 CollapseItem 组件提供这个方法
/**
 * CollapseItem的点击事件处理函数
 * @param itemName 用户所点击的项目的name
 */
const handleItemClick = itemName => {
  // 先临时保存原始数组
  let _activeNamesArr = [...activeNames.value]
  if (props.accordion) {
    // 手风琴模式，显示一个，或者0个
    _activeNamesArr = [activeNames.value[0] === itemName ? '' : itemName]
  } else {
    // 普通折叠面板，展开或者关闭
    // index 用于判断数组中是否存在对应的 name，(通过splice移除,所以用indexOf)
    const index = _activeNamesArr.indexOf(itemName)
    if (index > -1) {
      // 存在，移除该name
      _activeNamesArr.splice(index, 1)
    } else {
      // 不存在，添加
      _activeNamesArr.push(itemName)
    }
  }
  // 无论是哪一种模式，经过上面的代码，都已经准备好了最新的数组值
  activeNames.value = _activeNamesArr
  // 接下来我们需要触发两个事件
  emit('update:modelValue', _activeNamesArr)
  emit('change', _activeNamesArr)
}

// 依赖提供
provide(collapseCountextKey, {
  activeNames,
  handleItemClick,
})
</script>

<style lang="scss" scoped></style>
